<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script> 
/*!
 * jQuery corner plugin: simple corner rounding
 * Examples and documentation at: http://jquery.malsup.com/corner/
 * version 2.02 (12-NOV-2009)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 */
 
/**
 *  corner() takes a single string argument:  $('#myDiv').corner("effect corners width")
 *
 *  effect:  name of the effect to apply, such as round, bevel, notch, bite, etc (default is round). 
 *  corners: one or more of: top, bottom, tr, tl, br, or bl. 
 *           by default, all four corners are adorned. 
 *  width:   width of the effect; in the case of rounded corners this is the radius. 
 *           specify this value using the px suffix such as 10px (and yes, it must be pixels).
 *
 * @author Dave Methvin (http://methvin.com/jquery/jq-corner.html)
 * @author Mike Alsup   (http://jquery.malsup.com/corner/)
 */
;(function($) { 
 
var ua = navigator.userAgent;
var moz = $.browser.mozilla && /gecko/i.test(ua);
var webkit = $.browser.safari && /Safari\/[5-9]/.test(ua);
 
var expr = $.browser.msie && (function() {
    var div = document.createElement('div');
    try { div.style.setExpression('width','0+0'); }
    catch(e) { return false; }
    return true;
})();
    
function sz(el, p) { 
    return parseInt($.css(el,p))||0; 
};
function hex2(s) {
    var s = parseInt(s).toString(16);
    return ( s.length < 2 ) ? '0'+s : s;
};
function gpc(node) {
    for ( ; node && node.nodeName.toLowerCase() != 'html'; node = node.parentNode ) {
        var v = $.css(node,'backgroundColor');
        if (v == 'rgba(0, 0, 0, 0)')
            continue; // webkit
        if (v.indexOf('rgb') >= 0) { 
            var rgb = v.match(/\d+/g); 
            return '#'+ hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]);
        }
        if ( v && v != 'transparent' )
            return v;
    }
    return '#ffffff';
};
 
function getWidth(fx, i, width) {
    switch(fx) {
    case 'round':  return Math.round(width*(1-Math.cos(Math.asin(i/width))));
    case 'cool':   return Math.round(width*(1+Math.cos(Math.asin(i/width))));
    case 'sharp':  return Math.round(width*(1-Math.cos(Math.acos(i/width))));
    case 'bite':   return Math.round(width*(Math.cos(Math.asin((width-i-1)/width))));
    case 'slide':  return Math.round(width*(Math.atan2(i,width/i)));
    case 'jut':    return Math.round(width*(Math.atan2(width,(width-i-1))));
    case 'curl':   return Math.round(width*(Math.atan(i)));
    case 'tear':   return Math.round(width*(Math.cos(i)));
    case 'wicked': return Math.round(width*(Math.tan(i)));
    case 'long':   return Math.round(width*(Math.sqrt(i)));
    case 'sculpt': return Math.round(width*(Math.log((width-i-1),width)));
    case 'dog':    return (i&1) ? (i+1) : width;
    case 'dog2':   return (i&2) ? (i+1) : width;
    case 'dog3':   return (i&3) ? (i+1) : width;
    case 'fray':   return (i%2)*width;
    case 'notch':  return width; 
    case 'bevel':  return i+1;
    }
};
 
$.fn.corner = function(options) {
    // in 1.3+ we can fix mistakes with the ready state
 if (this.length == 0) {
        if (!$.isReady && this.selector) {
            var s = this.selector, c = this.context;
            $(function() {
                $(s,c).corner(options);
            });
        }
        return this;
 }
 
    return this.each(function(index){
  var $this = $(this);
  var o = [ options || '', $this.attr($.fn.corner.defaults.metaAttr) || ''].join(' ').toLowerCase();
  //var o = (options || $this.attr($.fn.corner.defaults.metaAttr) || '').toLowerCase();
  var keep = /keep/.test(o);                       // keep borders?
  var cc = ((o.match(/cc:(#[0-9a-f]+)/)||[])[1]);  // corner color
  var sc = ((o.match(/sc:(#[0-9a-f]+)/)||[])[1]);  // strip color
  var width = parseInt((o.match(/(\d+)px/)||[])[1]) || 10; // corner width
  var re = /round|bevel|notch|bite|cool|sharp|slide|jut|curl|tear|fray|wicked|sculpt|long|dog3|dog2|dog/;
  var fx = ((o.match(re)||['round'])[0]);
  var edges = { T:0, B:1 };
  var opts = {
   TL:  /top|tl|left/.test(o),       TR:  /top|tr|right/.test(o),
   BL:  /bottom|bl|left/.test(o),    BR:  /bottom|br|right/.test(o)
  };
  if ( !opts.TL && !opts.TR && !opts.BL && !opts.BR )
   opts = { TL:1, TR:1, BL:1, BR:1 };
   
  // support native rounding
  if ($.fn.corner.defaults.useNative && fx == 'round' && (moz || webkit) && !cc && !sc) {
   if (opts.TL)
    $this.css(moz ? '-moz-border-radius-topleft' : '-webkit-border-top-left-radius', width + 'px');
   if (opts.TR)
    $this.css(moz ? '-moz-border-radius-topright' : '-webkit-border-top-right-radius', width + 'px');
   if (opts.BL)
    $this.css(moz ? '-moz-border-radius-bottomleft' : '-webkit-border-bottom-left-radius', width + 'px');
   if (opts.BR)
    $this.css(moz ? '-moz-border-radius-bottomright' : '-webkit-border-bottom-right-radius', width + 'px');
   return;
  }
   
  var strip = document.createElement('div');
  strip.style.overflow = 'hidden';
  strip.style.height = '1px';
  strip.style.backgroundColor = sc || 'transparent';
  strip.style.borderStyle = 'solid';
 
        var pad = {
            T: parseInt($.css(this,'paddingTop'))||0,     R: parseInt($.css(this,'paddingRight'))||0,
            B: parseInt($.css(this,'paddingBottom'))||0,  L: parseInt($.css(this,'paddingLeft'))||0
        };
 
        if (typeof this.style.zoom != undefined) this.style.zoom = 1; // force 'hasLayout' in IE
        if (!keep) this.style.border = 'none';
        strip.style.borderColor = cc || gpc(this.parentNode);
        var cssHeight = $.curCSS(this, 'height');
 
        for (var j in edges) {
            var bot = edges[j];
            // only add stips if needed
            if ((bot && (opts.BL || opts.BR)) || (!bot && (opts.TL || opts.TR))) {
                strip.style.borderStyle = 'none '+(opts[j+'R']?'solid':'none')+' none '+(opts[j+'L']?'solid':'none');
                var d = document.createElement('div');
                $(d).addClass('jquery-corner');
                var ds = d.style;
 
                bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild);
 
                if (bot && cssHeight != 'auto') {
                    if ($.css(this,'position') == 'static')
                        this.style.position = 'relative';
                    ds.position = 'absolute';
                    ds.bottom = ds.left = ds.padding = ds.margin = '0';
                    if (expr)
                        ds.setExpression('width', 'this.parentNode.offsetWidth');
                    else
                        ds.width = '100%';
                }
                else if (!bot && $.browser.msie) {
                    if ($.css(this,'position') == 'static')
                        this.style.position = 'relative';
                    ds.position = 'absolute';
                    ds.top = ds.left = ds.right = ds.padding = ds.margin = '0';
                    
                    // fix ie6 problem when blocked element has a border width
                    if (expr) {
                        var bw = sz(this,'borderLeftWidth') + sz(this,'borderRightWidth');
                        ds.setExpression('width', 'this.parentNode.offsetWidth - '+bw+'+ "px"');
                    }
                    else
                        ds.width = '100%';
                }
                else {
                 ds.position = 'relative';
                    ds.margin = !bot ? '-'+pad.T+'px -'+pad.R+'px '+(pad.T-width)+'px -'+pad.L+'px' : 
                                        (pad.B-width)+'px -'+pad.R+'px -'+pad.B+'px -'+pad.L+'px';                
                }
 
                for (var i=0; i < width; i++) {
                    var w = Math.max(0,getWidth(fx,i, width));
                    var e = strip.cloneNode(false);
                    e.style.borderWidth = '0 '+(opts[j+'R']?w:0)+'px 0 '+(opts[j+'L']?w:0)+'px';
                    bot ? d.appendChild(e) : d.insertBefore(e, d.firstChild);
                }
            }
        }
    });
};
 
$.fn.uncorner = function() { 
 if (moz || webkit)
  this.css(moz ? '-moz-border-radius' : '-webkit-border-radius', 0);
 $('div.jquery-corner', this).remove();
 return this;
};
 
// expose options
$.fn.corner.defaults = {
 useNative: true, // true if plugin should attempt to use native browser support for border radius rounding
 metaAttr:  'data-corner' // name of meta attribute to use for options
};
    
})(jQuery);
</script> 
<style>
#mainContent {
	height: 240px;
overflow: hidden;
float:left;
width:600px;
position:relative; /* IE6,7 bug */
}

#scrollbar {
 width:15px;
 position:relative;
 z-index:333;
 float:left;
 margin-right:15px;
}

.ui-slider { 
 height:188px;
 position:relative;
 width:13px;
 margin: 10px 0px;
}

.ui-slider-handle {
 background: rgb(197,197,168);
 width:100%; 
 height:20px;
 display:block;
 position:absolute;
 margin-bottom:-10px;
}

.c {
 background: rgb(165,158,121);
}

#arrowDown {
 width:13px;
 height:15px;
 display:block;
 background: rgb(242,242,235) url(http://1.bp.blogspot.com/_6wOsIdNXFdY/Sxu0AvR9y5I/AAAAAAAAAmI/vHly32rloug/s320/arrows.png) no-repeat -13px 0px;
}

#arrowUp {
 width:13px;
 height:15px;
 display:block;
 background: rgb(242,242,235) url(http://1.bp.blogspot.com/_6wOsIdNXFdY/Sxu0AvR9y5I/AAAAAAAAAmI/vHly32rloug/s320/arrows.png) no-repeat 0px 0px;
}

a#arrowDown:hover {
 background-position: -13px -15px; 
}

a#arrowUp:hover {
 background-position: 0px -15px;
}

#rulerBorder {
 border-left: solid 1px rgb(165,158,121);
 border-right: solid 1px rgb(165,158,121);
 background: rgb(242,242,235);
 overflow:hidden;
}
 
.relative {
	position:relative;
}

.c {
	height:15px;
}




</style>
<script type="text/javascript">
$(document).ready(function() {
	   if ($('#mainContent .relative').height() > $('#mainContent').height()) {
	  $('#ruler').slider({
	   min: 0, 
	      max: 100,
	      orientation:'vertical',
	      value: 100
	  });
	  $('#ruler').bind('slide', moveContent);
	  $('#ruler').bind('change', moveContent);
	  
	  $('#arrowUp, #arrowDown').click(function() {return false;});
	  
	  $('#arrowUp').mousedown(function() {
	   $('#ruler').data('move', true);
	   move('Up');
	  });
	  $('#arrowDown').mousedown(function() {
	   $('#ruler').data('move', true);
	   move('Down');
	  });
	  $('#arrowDown, #arrowUp').mouseup(stopMoving);
	  $('#arrowDown').data('move', false);
	  
	  if ($.browser.msie) {
	  
	   $('#arrowDown').corner('bottom 5px').parent().css('padding', '0px 1px 1px 1px').corner("bottom 5px");
	   $('#arrowUp').corner('top 5px').parent().css('padding', '1px 1px 0px 1px').corner("top 5px");
	  } else {
	   $('#arrowDown').corner('bottom 3px').parent().css('padding', '0px 1px 1px 1px').corner("bottom 3px");
	   $('#arrowUp').corner('top 3px').parent().css('padding', '1px 1px 0px 1px').corner("top 3px");
	  }
	  $('#scrollbar').click(function(e){
	   var y = (e.originalEvent.layerY)?e.originalEvent.layerY:e.originalEvent.offsetY;
	   var height = $('#ruler').height();
	   if (y<$('.ui-slider-handle').height()/2)
	    $('#ruler').data('slider').value(100);
	   else if (y>height-$('.ui-slider-handle').height()/2)
	    $('#ruler').data('slider').value(0);
	   moveContent();
	   
	  })
	  setHandleHeight();
	  
	 }
	 $('#mainContent > .relative').resize(handleResize);
	});

	function handleResize() {
	    setHandleHeight();
	    var val = 100-((-parseInt($('#mainContent .relative').css('top')) / $('#mainContent .relative').height())*100);
	    $('#ruler').slider('value', val);
	}

	function setHandleHeight() {
	 var sliderHeight = $('.ui-slider').innerHeight();
	 var oldMargin = parseInt($('.ui-slider').css('margin-top'));
	 
	 $('.ui-slider-handle').css('height', (($('#mainContent').height() / $('#mainContent > .relative').height()))*(sliderHeight+oldMargin*2) + 'px');
	 var margin = $('.ui-slider-handle').height();
	 $('.ui-slider-handle').css('margin-bottom', Math.floor(-margin/2));
	 $('.ui-slider').css('margin-top', Math.floor(margin/2));
	 $('.ui-slider').css('margin-bottom', Math.floor(margin/2));
	 
	 var newHeight = sliderHeight + 2*oldMargin - margin;
	 var diff = (sliderHeight + oldMargin*2) - ((Math.floor(margin/2) * 2) + newHeight);
	 
	 $('.ui-slider').css('height', newHeight + diff);
	}

	function move(direction) {
	 var obj = $('#arrow'+direction);
	 var exp = 1;
	 if (direction == 'Down')
	  exp = -1;
	 
	 if ($('#ruler').data('move')) {
	  var value = $('#ruler').data('slider').value() + 2*exp;
	  $('#ruler').data('slider').value(value);
	  moveContent();
	  
	  var timeout = setTimeout(function(){move(direction)},10);
	  $('#ruler').data('moveTimeout', timeout);
	 } 
	}

	function stopMoving() {
	 $('#ruler').data('move', false);
	 clearTimeout($('#ruler').data('moveTimeout'));
	 $('#ruler').removeData('moveTimeout');
	}

	function moveContent(e, ui) {
	 var v;
	 if (typeof ui != 'undefined' && ui != null)
	  v = 100-ui.value;
	 else if (typeof $('#ruler').data('slider') != null)
	  v = 100-$('#ruler').data('slider').value();
	 var w = $("#mainContent > .relative").height() - $("#mainContent").height();
	 $('#mainContent > .relative').css('top', (-v * w /100) + 'px');

	}



</script>
<title>jQuery Scrollbar demo</title>
</head>
<body>

<div id="scrollbar"><div class="c"><a id="arrowUp" href="#"></a><br /> 
</div><div id="rulerBorder"><div id="ruler"></div></div><div class="c"><a id="arrowDown" href="#"></a><br /> 
</div></div><div id="mainContent"><div class="relative">Któż zbadał puszcz litewskich przepastne krainy<br /> 
Aż do samego środka, do jądra gęstwiny?<br /> 
Rybak ledwie u brzegów nawiedza dno morza;<br /> 
Myśliwiec krąży koło puszcz litewskich łoża,<br /> 
Zna je ledwie po wierzchu, ich postać, ich lice,<br /> 
Lecz obce mu ich wnętrzne serca tajemnice;<br /> 
Wieść tylko albo bajka wie, co się w nich dzieje.<br /> 
Bo gdybyś przeszedł bory i podszyte knieje,<br /> 
Trafisz w głębi na wielki wał pniów, kłod, korzeni,<br /> 
Obronny trzęsawicą, tysiącem strumieni<br /> 
I siecią zielsk zarosłych, i kopcami mrowisk,<br /> 
Gniazdami os, szerszeniów, kłębami wężowisk.<br /> 
<br /> 
Gdybyś i te zapory zmógł nadludzkiem męstwem,<br /> 
Dalej spotkać się z większem masz niebezpieczeństwem:<br /> 
Dalej co krok czyhają, niby wilcze doły,<br /> 
Małe jeziorka trawą zarosłe na poły,<br /> 
Tak głębokie, że ludzie dna ich nie dośledzą<br /> 
(Wielkie jest podobieństwo, że diabły tam siedzą).<br /> 
500 Woda tych studni sklni się, plamista rdzą krwawą.<br /> 
A z wnętrza ciągle dymi, zionąc woń plugawą,<br /> 
Od której drzewa wkoło tracą liść i korę;<br /> 
Łyse, skarłowaciałe, robaczliwe, chore,<br /> 
Pochyliwszy konary mchem kołtunowate<br /> 
I pnie garbiąc brzydkiemi grzybami brodate,<br /> 
Siedzą wokoło wody jak czarownic kupa<br /> 
Grzejąca się nad kotłem, w którym warzą trupa.<br /> 
<br /> 
</div></div><div class="s"></div>


</body>
</html>